<template>
	<view class="content" v-if="pageShow">
		<!-- 轮播图 -->
		<u-swiper :list="list5" height="750rpx" @click="lbtpriview(currentNum,list5)"
			@change="e => currentNum = e.current" autoplay circular indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list5.length }}</text>
			</view>
		</u-swiper>
		<view class="padding fafafa">
			<view class="padding ffffff radius">
				<view class="text_w color_san">个人简介</view>
				<view class="margin_top color_six text_a">{{dataAll.description}}</view>
			</view>
			<view class="padding priceBox margin_top3 ffffff  radius" v-for="item in dataAll.service_sku"
				:key="item.id">
				<view class="flexbetween">
					<view class="price">￥{{item.price}}</view>
					<view class="buy text_five" @click="confirmOrder(item.id)">立即购买</view>
				</view>
				<view class="margin_top text_d color_ling">{{item.name}}</view>
			</view>
			<view class="ffffff evalBox radius margin_top" v-if="comments.length">
				<view class="flexbetween">
					<view class="color_ling text_d">评价</view>
					<view class="flexleft" @click="goAllEval">
						<view class="text_five margin_right1" style="color: #F3271C;">查看全部</view>
						<u-icon name="arrow-right" color="rgba(243, 39, 28, 1)" size="12"></u-icon>
					</view>
				</view>
				<view v-for="(item,index) in comments" :key="item.id" v-if="index==0">
					<view class="flexbetween margin_top5">
						<view class="flexleft">
							<view class="imgBox margin_right2">
								<image :src="item.avatar" mode="widthFix"></image>
							</view>
							<view class="text_d color_ling">{{item.nickname}}</view>
						</view>
						<view class="text_five color_six">{{item.createtime_text}}</view>
					</view>
					<view class="text_a color_six margin_top">{{item.content}}</view>
					<view class="margin_top flexbetween">
						<view class="evalImage" v-for="(ite,ind) in item.images_arr" :key="ind"
							@click="lbtpriview(ind,item.images_arr)">
							<image :src="ite" mode="widthFix"></image>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="footer flexbetween ffffff">
			<view class="clear" @click="collect">{{dataAll.is_collect?"已收藏":"收藏"}}</view>
			<view class="confirm" @click="connection">聊一聊</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currentNum: 0,
				list5: [],
				listid: "",
				dataAll: {},
				comments: [],
				pageShow:false,
				user_id:uni.getStorageSync("user_id")
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getinfo()
		},
		methods: {
			connection() {
				if(this.dataAll.user_id==this.user_id){
					httpRequest.toast("自己不能和自己聊天哦！");
					return false
				}
				let that = this
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.requestChat('/api/user/addFriends', 'GET', {
					firend_id:that.dataAll.user_id,
					sendtype:1,
					user_id:uni.getStorageSync('user_id')
				}).then(res => {
					uni.hideLoading()
					let data = {
						firend_id: that.dataAll.user_id,
						friend_name: that.dataAll.user.nickname,
						firend_avatar_text: that.dataAll.user.avatar
					}
					uni.navigateTo({
						url: "/pages/chat/chat?msg=" + encodeURIComponent(JSON.stringify(data))
					})
				})
			},
			getinfo() {
				let _this = this
				httpRequest.request('/api/service/getdetail', 'GET', {
					id: _this.listid,
				}).then(res => {
					if (res.code == 1) {
						this.dataAll = res.data.info
						this.list5 = res.data.info.images_arr
						this.comments = res.data.comments
						this.pageShow=true
					}else{
						httpRequest.toast(res.msg);
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 收藏
			collect() {
				let _this = this
				httpRequest.request('/api/service/collect', 'GET', {
					id: _this.listid,
				}).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						if (this.dataAll.is_collect) {
							httpRequest.toast("已取消收藏");
						} else {
							httpRequest.toast("收藏成功");
						}
						this.getinfo()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			goAllEval(id) {
				uni.navigateTo({
					url: "/pages_index/allEval?type=2&id=" + this.listid
				})
			},
			confirmOrder(id) { //确认订单
				uni.navigateTo({
					url: "/pages_index/serviceConfirmOrder?fid=" + this.listid + "&id=" + id
				})
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i ,//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop:true,//循环预览只在APP生效
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 120rpx;
	}

	// 轮播图
	.indicator-num {
		width: 79rpx;
		height: 37rpx;
		background: rgba(0, 0, 0, .3);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		text-align: center;
		line-height: 30rpx;

		.indicator-num__text {
			font-size: 24rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
		}
	}

	// 个人简介
	.briefBox {
		padding: 30rpx 0;
	}

	// 价钱
	.priceBox {
		margin-top: 30rpx;

		.price {
			font-size: 30rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #F3271C;
		}

		.buy {
			width: 146rpx;
			height: 55rpx;
			border-radius: 39rpx;
			border: 2rpx solid rgba(243, 39, 28, 1);
			text-align: center;
			line-height: 55rpx;
			color: #F3271C;
		}
	}

	// 评价
	.evalBox {
		padding: 30rpx;

		.imgBox {
			width: 73rpx;
			height: 73rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.evalImage {
			width: 152rpx;
			height: 152rpx;
			// border-radius: 50%;
			// overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				border-radius: 18rpx;
			}
		}
	}

	.footer {
		width: 100%;
		padding: 40rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;

		.clear {
			width: 300rpx;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			border-radius: 41rpx;
			border: 2rpx solid rgba(243, 39, 28, 1);
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #F3271C;
		}

		.confirm {
			width: 300rpx;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			border-radius: 41rpx;
			background-color: rgba(243, 39, 28, 1);
			border: 2rpx solid rgba(243, 39, 28, 1);
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>